import React, { useMemo, useState } from 'react'
import './Login.scss'
import { NavBar, Toast } from 'antd-mobile'
import { LockOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { getRightCode, getEmailCode, emailReset, phoneReset } from '../../utils/request'//导入工具
export default function ResetPassword() {
    const navigate = useNavigate()
    //返回上一页
    const back = () => {
        navigate(-1)
    }
    const [email, setEmail] = useState('')
    const [sms, setSms] = useState(false)
    const [code, setCode] = useState('')
    const [password, setPassword] = useState('')
    const [rightCode, setRightCode] = useState('')
    const [phone, setPhone] = useState('')
    let [countdown, setCountdown] = useState(60)
    const [isShow, setIsShow] = useState(false)
    //获取验证码
    const getCode = async () => {
        //通过手机号获取验证码
        if (sms) {
            let reg = /^1[3-9]\d{9}$/
            if (phone.length != 11 || !reg.test(phone)) {
                Toast.show({
                    icon: 'fail',
                    content: '请输入正确的手机号',
                })
                return
            }
            let res = await getRightCode(phone)
            if (res.state == 200) {
                setRightCode(res.code)
                setCountdown(60)
                setIsShow(true)
                let copyCountdown = 59
                let timer = setInterval(() => {
                    if (copyCountdown > 0) {
                        setCountdown(copyCountdown--)
                    } else {
                        setIsShow(false)
                        clearInterval(timer)
                        setCountdown(60)
                        setRightCode('')
                        setCode('')
                    }
                }, [1000])
            }
        } else {//通过邮箱获取验证码
            if (email.indexOf('@') === -1) {
                Toast.show({
                    icon: 'fail',
                    content: '请输入正确的邮箱',
                })
                return
            }
            let res = await getEmailCode(email)
            if (res.state == 200) {
                setRightCode(res.code)
                setCountdown(60 * 5)
                setIsShow(true)
                let copyCountdown = 299
                let timer = setInterval(() => {
                    if (copyCountdown > 0) {
                        setCountdown(copyCountdown--)
                    } else {
                        setIsShow(false)
                        clearInterval(timer)
                        setCountdown(60 * 5)
                        setRightCode('')
                        setCode('')
                    }
                }, [1000])
            }
        }
    }
    //重置密码
    const reset = async () => {
        if (!code || !rightCode || !password) {
            Toast.show({
                icon: 'fail',
                content: '请填写完整信息',
            })
            return
        }
        //通过手机号重置密码
        if (sms) {
            let reg = /^1[3-9]\d{9}$/
            if (phone.length != 11 || !reg.test(phone)) {
                Toast.show({
                    icon: 'fail',
                    content: '请输入正确的手机号',
                })
                return
            }
            if (code != rightCode) {
                Toast.show({
                    icon: 'fail',
                    content: '验证码错误',
                })
                return
            }
            let res = await phoneReset(phone, password)
            Toast.show({
                icon: res.code == 200 ? 'success' : 'fail',
                content: res.msg,
            })
            if (res.code == 200) {
                navigate('/login')
            }
        } else {//通过邮箱重置密码
            if (!email) {
                Toast.show({
                    icon: 'fail',
                    content: '请填写完整信息',
                })
                return
            }
            if (email.indexOf('@') === -1) {
                Toast.show({
                    icon: 'fail',
                    content: '请填写正确的邮箱',
                })
                return
            }
            if (code != rightCode) {
                Toast.show({
                    icon: 'fail',
                    content: '验证码错误',
                })
                return
            }
            let res = await emailReset(email, password)
            Toast.show({
                icon: res.code == 200 ? 'success' : 'fail',
                content: res.msg,
            })
            if (res.code == 200) {
                navigate('/login')
            }
        }
    }
    //判断是否填入信息
    const showColor = useMemo(() => {
        if (sms) {
            if (!phone || !password || !code || !rightCode) {
                return true
            } else {
                return false
            }
        } else {
            if (!email || !password || !code || !rightCode) {
                return true
            } else {
                return false
            }
        }
    }, [sms, phone, email, password, code, rightCode])
    //切换登录方式清空信息
    const changeSms = (falg) => {
        if (falg) {
            setSms(true);
        } else {
            setSms(false);

        }
        setPhone('')
        setEmail('')
        setIsShow(false)
        setCountdown(60)
        setRightCode('')
        setCode('')
        setPassword('')
    }
    return (
        <div className='resetPassword'>
            <NavBar onBack={back}></NavBar>
            <div className='resetPassword_box'>
                <div className='lock_box'>
                    <span className='lock_span' >
                        <LockOutline className='lock_icon' />
                    </span>
                </div>
                <h1>忘记密码</h1>
                <p>输入与您的账户关联的电子邮件，我们将发送电子邮件以重置您的密码</p>
            </div>
            <div className='resetPassword_main'>
                <div className='login_box_item' style={{ display: !sms ? 'block' : 'none' }}>
                    <p>邮箱</p>
                    <input type="text" placeholder='这里请输入邮箱' value={email} onChange={(e) => { setEmail(e.target.value) }} />
                </div>
                <div className='login_box_item' style={{ display: sms ? 'block' : 'none' }}>
                    <p>手机号</p>
                    <input type="text" placeholder='这里请输入手机号' value={phone} onChange={(e) => { setPhone(e.target.value) }} />
                </div>
                <div className='login_box_item'>
                    <p>新密码</p>
                    <input type="password" placeholder='这里请输入新密码' value={password} onChange={(e) => { setPassword(e.target.value) }} />
                </div>
                <div className='login_box_item'>
                    <p>验证码</p>
                    <div className='login_code_box'>
                        <input type="text" placeholder='这里请输入验证码' value={code} onChange={(e) => { setCode(e.target.value) }} />
                        <button className='get_code' onClick={getCode} disabled={isShow}>
                            {isShow ? countdown + 's' : '获取验证码'}
                        </button>
                    </div>
                </div>
            </div>
            <button className='resetPassword_btn' disabled={showColor}
                style={{ background: showColor ? '#ccc' : '#FA7B55' }} onClick={reset}>
                找回密码
            </button>
            <div className='resetPassword_buttom'>
                <span onClick={() => { changeSms(true) }} style={{ display: sms ? 'none' : 'block' }}>短信找回？</span>
                <span onClick={() => { changeSms(false) }} style={{ display: !sms ? 'none' : 'block' }}>邮箱找回？</span>
            </div>
        </div >
    )
}
